<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>jQuery拖动剪裁上传图片作为头像代码</title>

	<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>

	<div class="container">
		<input type="text" class="inputUrl" placeholder="请输入要下载的图片地址"> <button class='copyBtb'>点击粘贴</button>
		<br>
		<div class="pic-box">
			<img src="" class="preview" alt="">
			<div class="selectBox"></div>
			<p>请将文件拖到此处</p>
		</div>

		<input type="file" hidden id="file">
		<button class="saveBtn">剪切</button>
	</div>

	<script type="text/javascript" src="js/cropbox.js"></script>
	<script type="text/javascript">
		var options = {
			thumbBox: ".thumbBox",
			spinner: ".spinner",
			imgSrc: "img/avatar.jpg",
		};
		const imageBox = document.querySelector(".imageBox");
		const uploadFile = document.getElementById("upload-file");
		const cropImg = document.querySelector(".cropped");
		let cropper = new CropBox(options, imageBox);
		const btnCrop = document.getElementById("btnCrop");
		const btnZoomIn = document.getElementById("btnZoomIn");
		const btnZoomOut = document.getElementById("btnZoomOut");
		uploadFile.onchange = function () {
			var reader = new FileReader();
			reader.onload = function (e) {
				options.imgSrc = e.target.result;
				cropper = new CropBox(options, imageBox);
			};
			reader.readAsDataURL(this.files[0]);
		};

		btnCrop.onclick = function () {
			let imgUrl = cropper.getDataURL();

			cropImg.innerHTML = `<img src='${imgUrl}' align="absmiddle" 
		style="width:64px;margin-top:4px;
		border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" 
		><p>64px*64px</p><img src='${imgUrl}'   align="absmiddle" 
		style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>
		<img  src='${imgUrl}'  align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>
		`;
		};
		btnZoomIn.onclick = function () {
			cropper.zoomIn();
		};
		btnZoomOut.onclick = function () {
			cropper.zoomOut();
		};
	</script>
</body>

</html>